<template>
  <div class="container">
    <h2>登录</h2>
    <form @submit.prevent="handleLogin">
      <div class="form-group">
        <label for="loginEmail">邮箱:</label>
        <input type="text" id="loginEmail" v-model="login.email" required />
      </div>
      <div class="form-group">
        <label for="loginPassword">密码:</label>
        <input type="password" id="loginPassword" v-model="login.password" required />
      </div>
      <button type="submit">登录</button>
    </form>
    <p>还没有账户？<router-link to="/register">注册</router-link></p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      login: {
        email: '',
        password: ''
      }
    };
  },
  methods: {
    handleLogin() {
      const loginData = {
        email: this.login.email,
        password: this.login.password
      };
      axios.post('http://localhost:9090/student/login', loginData)
          .then(response => {
            console.log("登录成功", response);
            localStorage.setItem('user', JSON.stringify(response.data)); // 将用户信息存储在 localStorage 中
            this.$router.push('/'); // 登录成功后跳转到首页
          })
          .catch(error => {
            console.error("登录失败", error);
          });
      axios.get('http://localhost:9090/student/info',{params:{email:loginData.email}})
          .then(response1 => {
            console.log("查询成功",response);
            localStorage.setItem('useremag', JSON.stringify(response1.data));
          })
          .catch(error1 => {
            console.error("查询失败", error1);
          });
    }
  }
};
</script>
<style scoped>
.container {
  max-width: 300px;
  margin: auto;
  background: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
}

.form-group {
  margin-bottom: 15px;
}

input[type="text"], input[type="password"] {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
